<template>
  <!-- 旧日账单明细 -->
  <div class="home-page-container">
    <el-page-header @back="goBack" content=""></el-page-header>
    <!-- search 查询 -->
    <el-card shadow="never">
      <mer-search :searchConfig="formConfig" :searchBar="searchBar"
        @search="search"
        @reset="reset(initQuery)"
        @changeTime="(value,model)=>changeTime(value,'searchBar', 'startTime', 'endTime')"
        :loading="tableLoading"
        :isLayout="true">
        <template slot="handler">
          <el-button size="mini" @click="download" icon="el-icon-download">导出</el-button>
        </template>
      </mer-search>
    </el-card>
    <!-- summary 汇总信息 -->
    <el-card style="margin: 20px 0 10px" shadow="never">
      <div class="sum-wrapper">
        <div class="sum-item sum-item-1">
          <div class="value">{{sumInfo.oilAmount || 0}}</div>
          <div class="label">加油消费合计(元)</div>
        </div>
        <div class="sum-item sum-item-2">
          <div class="value">{{sumInfo.slottingFeeAmount || 0}}</div>
          <div class="label">通道费合计(元)</div>
        </div>
        <div class="sum-item sum-item-3">
          <div class="value">{{sumInfo.oilReturnAmount || 0}}</div>
          <div class="label">加油消费-退还合计(元)</div>
        </div>
        <div class="sum-item sum-item-4">
          <div class="value">{{sumInfo.slottingFeeReturnAmount || 0}}</div>
          <div class="label">通道费-退还合计(元)</div>
        </div>
      </div>
    </el-card>
    <!-- table 表格 -->
    <el-card shadow="never">
      <mer-table :loading="tableLoading"
        :tableConfig="tableConfig"
        :tableData="tableData"
        :pagination="pagination"
        @SizeChange="handleSizeChange"
        @PageChange="pageChange"
        :hasIndex="true">
        <template slot="handler" slot-scope="{row}">
          <el-button-group>
            <el-button size="mini" @click="showDetail(row)">详情</el-button>
          </el-button-group>
        </template>
      </mer-table>
    </el-card>
    <!-- 详情 -->
    <detail-dialog v-if="detailId" :billId="detailId" @close="detailId=''"></detail-dialog>
  </div>
</template>
<script>
import listPage from '@/mixins/listPage'
import queryMix from '@/views/finance/mixins/query'
import DetailDialog from './oldDetailDialog'
import { getOldFlowQueryApi, getOldFlowSummaryApi, getOldFlowListApi, downloadOldFlowBillApi} from '@/api/finance'

  // 查询表单配置
let formConfig = [
  { label: '订单号', type: 'input', modelName: 'orderCode', placeholder: '', maxlength: 100 },
  { label: '账单号', type: 'input', modelName: 'billNumber', placeholder: '', maxlength: 100 },
  { label: '账单科目', type: 'select', modelName: 'billSubject', placeholder: '全部', selectOptions: [], define: true, selectLabel: 'label', selectValue: 'value' },
  { label: '账单类型', type: 'select', modelName: 'billType', placeholder: '全部', selectOptions: [], define: true, selectLabel: 'label', selectValue: 'value' },
  { label: '状态', type: 'select', modelName: 'billStatus', placeholder: '全部', selectOptions: [], define: true, selectLabel: 'label', selectValue: 'value' },
  { label: '订单结算时间', labelWidth:'110px', type: 'date', modelName: 'tradeTime', model: '', dateType: 'datetimerange', format: 'yyyy-MM-dd HH:mm:ss', clearable:false, pickerOptions:{} },
]
// 表格参数配置
let tableConfig = [
  { label: '账单号', prop: 'billNumber', fixed: 'left', width: 150 },
  { label: '订单号', prop: 'orderCode', width: 150 },
  { label: '油站编码', prop: 'gasId', width: 150 },
  { label: '油站名称', prop: 'gasName', width: 150 },
  { label: '账单类型', prop: 'billTypeName', width: 150 },
  { label: '账单科目', prop: 'billSubjectsName', width: 150 },
  { label: '状态', prop: 'statusName', width: 150 },
  { label: '实际金额(元)', prop: 'amount', width: 136 },
  { label: '枪价(元)', prop: 'amountGun', width: 136},
  { label: '让利(元)', prop: 'amountRebate', width: 136 },
  { label: '订单结算时间', prop: 'orderSettlementTime', width: 136 },
  { label: '操作', slot: 'handler', fixed: 'right', width: 150 }
]
export default {
  mixins:[ listPage, queryMix ],
  components:{
    DetailDialog
  },
  data(){
    return{
      tradeTime:'',
      formConfig: formConfig,
      tableConfig: tableConfig,
      sumInfo:{
        oilAmount: '0.00',
        slottingFeeAmount: '0.00',
        oilReturnAmount: '0.00',
        slottingFeeReturnAmount: '0.00'
      },
      detailId:'',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime();
          if (maxDate) {
            this.selectDate = ''
          }
        },
        // 限制时间选择范围7天
        disabledDate: (time) => {
          if (this.selectDate !== '') {
            const one = 6 * 24 * 3600 * 1000;
            const minTime = this.selectDate - one;
            const maxTime = this.selectDate + one;
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      }
    }
  },
   created(){
    this.initPage()
  },
  methods:{
    //返回上一页，
    goBack () {
      this.$router.push({path:'/bill/dailyBillDetail'})
    },
    initPage () {
      this.initQuery()
      this.getQueryProps()
      this.initList(getOldFlowListApi,true,getOldFlowSummaryApi)
    },  
    // 设置默认查询条件，默认时间间隔2天
    initQuery () {
      this.tradeTime = ''
      this.initTime('tradeTime', 1, 'searchBar', false, 'startTime', 'endTime')
      const { tradeTime, pickerOptions } = this
      const initObj = { tradeTime: [tradeTime, pickerOptions] }
      this.setSearchConfig(initObj)
    },
    // 获取查询条件：交易类型
    async getQueryProps () {
      try{
        const { code,result = {} } = await getOldFlowQueryApi()
        if(code !== 200)  return
        const { billTypes, billStatus, billSubjects} = result
        const initObj = { 
          billType: this.optionsWrapper(billTypes),
          billStatus: this.optionsWrapper(billStatus),
          billSubject: this.optionsWrapper(billSubjects)
        }
        this.setSearchConfig(initObj)
      }catch(err){
        console.log(err)
      }
    },
    //导出
    download () {
      this.downloadFile(downloadOldFlowBillApi,'结算日账单明细(旧)')
    },
    showDetail (row) {
      console.log(row)
      this.detailId = row.id
    }
  }
}
</script>
<style lang="less" scoped>
.home-page-container{
  margin-top: 20px;
}
.sum-wrapper{
  display: flex;
  flex-flow: nowrap;
  color: #222;
  .sum-item{
    margin-right: 106px;
    padding-left: 10px;
    .value{
      font-size:26px;
      font-weight:bold;
      margin-bottom: 5px;
    }
    .label{
      font-size:14px;
    }
  }
  .sum-item-1{
    border-left: 3px solid #C93A02;
  }
  .sum-item-2{
    border-left: 3px solid #E7B911;
  }
  .sum-item-3{
    border-left: 3px solid #027CC9;
  }
  .sum-item-4{
    border-left: 3px solid #9A02C9;
  }
  .sum-item-5{
    border-left: 3px solid #A6C902;
  }
}
</style>
